<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>修改专家信息</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../css/public.css"/>
	<style type="text/css">
		.expert-con .not_border_left {
			border-left: none !important;
		}
		
		.expert-con .layui-form-select dl dd.layui-this {
			background-color: #1E9FFF !important;
		}
		.expert-con {
			padding: 10px 15px 15px 15px;
			margin-bottom: 20px;
		}
		.expert-con .layui-table-tool{
			margin-bottom: 10px;
		}
		.expert-con .layui-table-box{
			border: 1px solid #eee;
		}
		.expert-con .layui-table-body table tbody .layui-table-hover{
			background: #fffdd3 !important;
		}
		.expert-con .layui-table-body table tbody .layui-table-click{
			background: #fdef9b !important;
		}
		.expert-con .layui-form-item .layui-input-block .required {
			color: #ffb800; 
			font-size: 32px; 
			float: left; 
			margin-left: 5px; 
			margin-top: 15px;
			position: absolute;
			right: -15px;
		}
		.expert-con .layui-table-view{
			border: none !important;
		}
		/* 查看专家信息弹窗样式 */
		.selExpertDet-con{
			padding: 0px 20px 0px 20px;
			display: none;
		}
		.selExpertDet-con table tr td{
			padding: 15px;
			text-align: center;
		}
		.selExpertDet-con .tdbck{
			background: #f2f2f2;
			width: 30%;
		}
		.selExpertDet-con .layui-table .tdbck{
			width: 20% !important;
		}
		/* 修改专家信息弹窗样式 */
		.editExpertLayer-con{
			display: none;
			padding:10px 15px 15px 15px;
			margin-bottom: 40px;
		}
		.editExpertLayer-con .top-inp{
			margin-left: 20px;
		}
		.editExpertLayer-con .from-con{
			margin: auto;
			background-color: #E2E2E2;
			padding: 10px;
			overflow: hidden;
		}
		.editExpertLayer-con .from-con .layui-form-item{
			margin:20px 0 ;
		}
		.editExpertLayer-con .not_border_left {
			border-left: none !important;
		}
		.editExpertLayer-con .layui-form-item .layui-input-block .required {
			color: #ffb800; 
			font-size: 32px; 
			float: left; 
			margin-left: 5px; 
			margin-top: 5px;
			position: absolute;
			right: -15px;
		}
		.editExpertLayer-con .layui-form-select dl dd.layui-this{
			background-color: #1E9FFF !important;
		}
		 .editExpertLayer-con .layui-btn{
			background-color: #1E9FFF !important;
		}
		.editExpertLayer-con .layui-form-select dl{
			max-height:230px !important;
		}
		.editExpertLayer-con .layui-row .layui-col-xs4{
			text-align: center;
		}
		.editExpertLayer-con .layui-row .layui-col-xs4 .layui-upload-img{
			width: 200px;
			height: 150px;
			border: 1px solid #e6e6e6;
			background-color: #FFFFFF;
		}
	</style>
</head>
<body>
	<div class="expert-con">
		<script type="text/html" id="toolbarDemo">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input id="inpseleUserName" name="inpseleUserName" type="text" autocomplete="off" placeholder="请输入专家姓名" class="layui-input">
				</div>
				<div class="layui-inline">
					<button type="button" class="layui-btn layui-bg-blue" lay-event="seleBtn" lay-submit="" lay-filter="demo1">查询</button>	
				</div>
			</div>		
		</script>
		
		<table class="layui-hide" id="tabExpert" lay-filter="tabExpert"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="select">查看</a>
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
		</script>

		<!-- 查看专家信息弹窗开始 -->
		<div id="selExpertDet" class="selExpertDet-con">
			<table class="layui-table">
				<tbody>
					<tr>
						<td class="tdbck">姓名</td>
						<td><span id="selName"></span></td>
						<td class="tdbck">性别</td>
						<td><span id="selSex"></span></td>
					</tr>
					<tr>
						<td class="tdbck">联系电话</td>
						<td><span id="selPhone"></span></td>
						<td class="tdbck">QQ</td>
						<td><span id="selqq"></span></td>
					</tr>
					<tr>
						<td class="tdbck">专家描述</td>
						<td><span id="selDescription"></span></td>
						<td class="tdbck">头像</td>
						<td><img alt="" id="sellayphoto" src=""></td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- 查看专家信息弹窗开始 -->
		
		<!-- 修改专家信息弹窗开始 -->
		<div class="editExpertLayer-con" id="editExpertLayer">
			<div class="from-con">
				<div style="width: 90%;">
				<form class="layui-form" action="" id="editExpertLayer">
					<div class="layui-row">
						<div class="layui-col-xs10">
						  	<div class="layui-form-item" style="margin-top: 10px;">
							    <label class="layui-form-label">姓名</label>
							    <div class="layui-input-block">
							      <input id="realname" type="text" style="float: left;position: relative;" name="realname" lay-verify="required" placeholder="请输入专家姓名" class="layui-input" autocomplete="off">
							      <input id="editpsyid" type="text" style="display:none;" class="layui-input">
							      <i class="required">*</i>
							    </div>
						  	</div>
						  	<div class="layui-form-item">
							    <label class="layui-form-label">性别</label>
							    <div class="layui-input-block" name="sex">
							      <input type="radio" class="sex" name="sex" value="男" title="男" checked>
							      <input type="radio" class="sex" name="sex" value="女" title="女">
							    </div>
							</div>
							<div class="layui-form-item">
							    <label class="layui-form-label">电话</label>
							    <div class="layui-input-block">
							    	<input id="phone" name="phone" type="tel" style="float: left;position: relative;" class="layui-input" placeholder="请输入联系电话" autocomplete="off">
							    	<i class="required">*</i>
							    </div>
							</div>
							<div class="layui-form-item">
							    <label class="layui-form-label">QQ</label>
							    <div class="layui-input-block">
							    	<input id="inpexpertqq" name="inpexpertqq" type="text" class="layui-input" placeholder="请输入QQ号" autocomplete="off">
							    </div>
							</div>
					  	</div>
				    </div>
				    <div class="layui-row">
					    <div class="layui-col-xs10">
							<div class="layui-form-item layui-form-text">
							    <label class="layui-form-label">专家描述</label>
							    <div class="layui-input-block">
							      <textarea  id="description" name="description" placeholder="请输入专家描述" class="layui-textarea"></textarea>
							    </div>
							 </div>
						</div>
					</div>
				  	<div class="layui-form-item">
					    <div class="layui-input-block">
					      <button type="button" id="btneditExpertLayer" lay-submit="" lay-filter="btneditExpertLayer" class="layui-btn layui-btn-normal" style="float: right;">保  存 </button>
					    </div>
				  	</div>
				</form>
				</div>
			</div>
		</div>
		<!-- 修改专家信息弹窗结束 -->
	</div>
	<script src="../js/jquery-3.3.1.js"></script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['table','form','layer','laydate','laytpl'], function() {
			var table = layui.table;
			form = layui.form,
		    $ = layui.jquery,
		    laydate = layui.laydate,
		    laytpl = layui.laytpl;
			
			table.render({
				elem: '#tabExpert',
				id:'expertid',
				url: '../sysexpertmanage/getexpertlist',
				toolbar: '#toolbarDemo',
				title: '专家信息数据表',
				height:"full-70",
				skin: 'line',
				even: true,
				cols: [
					[{
						type: 'numbers',
						align: "center",
						title: '序号'
					},{
						field: 'realname',
						title: '专家姓名',
						align: "center"
					}, {
						field: 'sex',
						title: '性别',
						align: "center"
					}, {
						field: 'phone',
						title: '联系电话',
						align: "center"
					}, {
						field: 'qq',
						title: 'QQ',
						align: "center"
					}, {
						field: 'createtime',
						title: '创建时间',
						align: "center"
					},{
						title: '操作',
						toolbar: '#barDemo',
						align: "center"
					}]
				], page: {
					layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
					groups: 5,
					limit: 10,
					theme: '#1E9FFF',						
				}
			});
			
			/* 点击查询对表格进行筛选 */
			table.on('toolbar(tabExpert)', function(obj) {
				switch(obj.event) {
					case 'seleBtn':
						var userName = $("#inpseleUserName").val().trim();
						table.render({
							elem: '#tabExpert',
							id:'expertid',
							url: '../sysexpertmanage/getexpertlist?realname='+userName,
							toolbar: '#toolbarDemo',
							title: '专家信息数据表',
							height:"full-70",
							skin: 'line',
							even: true,
							cols: [
								[{
									type: 'numbers',
									align: "center",
									title: '序号'
								},{
									field: 'realname',
									title: '专家姓名',
									align: "center"
								}, {
									field: 'sex',
									title: '性别',
									align: "center"
								}, {
									field: 'phone',
									title: '联系电话',
									align: "center"
								}, {
									field: 'qq',
									title: 'QQ',
									align: "center"
								}, {
									field: 'createtime',
									title: '创建时间',
									align: "center"
								},{
									title: '操作',
									toolbar: '#barDemo',
									align: "center"
								}]
							], page: {
								layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
								groups: 5,
								limit: 10,
								theme: '#1E9FFF',						
							}
						});
						$("#inpseleUserName").val(userName);
						break;
					};
			});
		    
			//将表格的一条数据加载到表单中
		    table.on('tool(tabExpert)', function(obj){
			    var data = obj.data;
			    if(obj.event == 'select'){
			    	$("#selName").text(data.realname);
					$("#selSex").text(data.sex);
					$("#selPhone").text(data.phone);
					$("#selqq").text(data.qq);
					$("#selDescription").text(data.describe);
					$("#sellayphoto").attr("src","/kmsximgs/photo/"+data.path);
				      layer.open({
				        type: 1, 
				        title: '专家信息详情',
				        area: ['700px', '400px'],
				        shade: 0.8,
				        content: $('#selExpertDet'),
				        cancel: function(){ 
						   $(".selExpertDet-con").css("display","none");
						}
				      });
				  
			    }
			    /*修改一个专家信息 */
			    if(obj.event === 'edit'){
			    	$("#editpsyid").val(data.psyid);
			    	$("#realname").val(data.realname);
					$("#phone").val(data.phone);
					$("#inpexpertqq").val(data.qq);
					$("#description").val(data.describe);
					$(".sex").each(function(){
						if($.trim($(".sex")[0].value) == $.trim(data.sex)){
							$(".sex")[0].checked = true;
							form.render("radio");
						}
						if($.trim($(".sex")[1].value) == $.trim(data.sex)){
							$(".sex")[1].checked = true;
							form.render("radio");
						}
					});
					var index=layer.open({
						type: 1, 
					    title: '修改专家信息',
				        area: ['830px', '95%'],
				        shade: 0.8,
				        maxmin: true,
				        content: $('#editExpertLayer'),
				        cancel: function(){ 
						   $(".editExpertLayer-con").css("display","none");
						}
				    });
			    	layer.full(index);
			    }
			    /* 删除一个专家信息 */
			    if(obj.event === 'delete'){	    	
			    	layer.confirm('你确定要删除吗？', {
			    		  btn: ['确定','取消'] 
			    		}, function(){
			    	    	$.ajax({
			        			url: '../sysexpertmanage/deleteexpert',  
			        	        type: 'get', 
			        	        dataType: 'json',  
			        	        data:{sysid:data.psyid},
			        	        success: function (getdata) {
			        	          if (getdata.code == 10001) { 
			        	        	  layer.alert(getdata.msg, {icon: 6});
			        	        	  table.reload("expertid", { //此处是上文提到的 初始化标识id
							              where: {
							            	  keyword:getdata.code == '10001'
							              }
						               });
			        	          }else { 
			        	        	  layer.alert(getdata.msg, {icon: 5});
			        	          }  
			        	        },
			        	        error:function(){
			        	        	layer.alert(getdata.msg, {icon: 5}); 
			        	        }
			        		});
			    		}, function(){layer.msg("取消成功！",{icon:1}) }
			    	);
			    }
		    });
			
		    $("#btneditExpertLayer").click(function(){
		    	var sysid=$("#editpsyid").val();
	        	var realname=$("#realname").val();
				var sex=$("input[name='sex']:checked").val()
				var phone=$("#phone").val();
				var qq=$("#inpexpertqq").val();
				var descripe=$("#description").val();
	    		
	    		$.ajax({
	    			url: '../sysexpertmanage/updateexpert',  
	    	        type: 'get', 
	    	        dataType: 'json',  
	    	        data:{sysid:sysid,realname:realname,sex:sex,phone:phone,
	        			describe:descripe,QQ:qq},
	    	        success: function (getdata) {
	    	          if (getdata.code == 10001) { 
	    	        	  layer.confirm(getdata.msg, {
	    					  btn: ['确定'],
	    					  icon:1
	    				  }, function(){
	    					  layer.closeAll();
	    					  table.reload("expertid", { //此处是上文提到的 初始化标识id
		    		                where: {
		    		                	keyword:getdata.code=='10001'
		    		                }
		    		          });	
	    				  });
	    	          }else { 
	    	        	  layer.alert(getdata.msg, {icon: 5});
	    	        	  return false;
	    	          }  
	    	        },
	    	        error:function(){
	    	        	layer.alert('专家信息修改失败！', {icon: 5}); 
	    	        }
	    		});
	        });
		});
	</script>
</body>
</html>